<template>
    <el-dialog title="查看终端" :visible="visible" @update:visible="updateVisible" @closed="doCloseEdit" width="1000px">
      <el-form :inline="true" size="small" :model="searchForm" class="condition" style="margin-top:10px;dispaly:flex;">
        <el-form-item>
          <el-input
            :placeholder="$t('请输入设备名称搜索')"
            v-model="searchForm.name"
            clearable
            style="width:160px;"
          >
            <template slot="prepend">
              <i class="iconfont icon-sousuo" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <bs-search-button-icon @click.native="searchClick"></bs-search-button-icon>
        </el-form-item>
      </el-form>
        <list
          ref="list"
          class="center"
          width="100%"
          height="450px"
          :showIndex="true"
          :list-data="tableData"
          :table-tag="tableName"
          :has-select="false"
          :list-cols="colData"
          :init-cols-props.sync="initColsProps"
          :init-headmune-flag="initHeadmuneFlag"
          :action-opts="actionOpts"
          @init-table="initTable"
        >
        </list>
        <pagination
          :total="pageData.total"
          :page="pageData.page"
          :limit="pageData.limit"
          @pagination="init"
          :showAllChecked="false"
          :allChecked="false"
        ></pagination>
        <div slot="footer" class="dialog-footer">
            <bs-confirm-button-icon size="mini" @click.native="okClick" :text="'确定'" />
            <bs-cancel-button-icon size="mini" @click.native="doCloseEdit" />
        </div>
    </el-dialog>
</template>

<script>
import { requestOpts } from '@/utils/request.js'
import NewsApi from '@/api/news'
import Pagination from '@/components/Pagination'
import List from '@/components/List'
export default {
    components:{
      Pagination,
      List
    },
    data() {
        return {
          tableData: [],// 定制列表
          tableName: 'deviceInfoTable',
          actionOpts: {
            show: false,
          },
          initHeadmuneFlag:false,
          initColsProps: [
            'name',
            'macText',
            'no',
            'cityGroupName',
            'groupName',
            'screenName',
          ],
          colData: [
            { label: '设备名称', prop: 'name', minwidth: 100 },
            { label: 'MAC地址', prop: 'macText', minwidth: 100 },

            {
              label: '设备编号',
              prop: 'no',
              minwidth: 125,
            },
            {
              label: '所属城市',
              prop: 'cityGroupName',
              minwidth: 100,
            },
            {
              label: '所属区县',
              prop: 'groupName',
              minwidth: 100,
            },
            {
              label: '屏幕名称',
              prop: 'screenName',
              minwidth: 100,
            },
          ],
          pageData: {
            page: 1,
            total: 0,
            limit: 15,
          },
          searchForm:{
            name:''
          },
          queryData:{}
        }
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        id: {
            type: [String, Number],
            default: 0
        },
    },
    filters: {
      onlineFilter(val, te) {
        let msg = ''
        switch (val) {
          case 0:
            msg = te('离线')
            break
          case 1:
            msg = te('在线')
            break
        }
        return msg
      },
    },
    watch: {
        visible(val) {
            if(val) {
                this.init({page:1})
            }
        }
    },
    methods: {
        updateVisible(v) {
            this.$emit('update:visible', v)
        },
        doCloseEdit() {
            this.updateVisible(false)
            // this.$emit('close')
        },
        okClick(){
          this.updateVisible(false)
        },
        initTable(config) {
          this.initHeadmuneFlag = true
        },
        async init(current) {
          if(current) {
              this.pageData = {
              ...this.pageData,
              ...current
              }
          }
          var queryData = this.queryData
          queryData.newsNo = this.id
          queryData.current = this.pageData.page
          queryData.size = this.pageData.limit
          const res = await NewsApi.lookTerminal(queryData)
          if(res){
            this.tableData = res.records || []
            this.pageData.total = Number(res.total ? res.total : 0)
          }
          console.log(res,'res....')
        },
        searchClick(){
          this.queryData = {
            ...this.queryData,
            ...this.searchForm
          }
          this.init({page:1})
        }
    }
}
</script>
<style lang="scss" scoped>
  .condition{
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
</style>
